<template>
  <div class="diantai-container">
    <Header />
    <div class="management-main">
      <div class="left-nav">
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'memberManagement'" 
          :class="{ 'active': activeTab === 'memberManagement' }"
        >
          成员管理
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'scheduleManagement'" 
          :class="{ 'active': activeTab === 'scheduleManagement' }"
        >
          排班管理
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'departmentMeeting'" 
          :class="{ 'active': activeTab === 'departmentMeeting' }"
        >
          部门会议
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeTab = 'personalCenter'" 
          :class="{ 'active': activeTab === 'personalCenter' }"
        >
          个人中心
        </a>
      </div>
      
      <div class="content-area">
        <!-- 成员管理 -->
        <div class="module-card" v-if="activeTab === 'memberManagement'">
          <div class="module-header">
            <h3>成员管理</h3>
            <button @click="showAddMemberDialog = true" class="btn-primary">添加成员</button>
          </div>
          
          <div class="search-filter">
            <input 
              type="text" 
              v-model="memberSearch" 
              placeholder="搜索成员姓名或学号"
              class="search-input"
            >
            <select v-model="memberFilterPosition" class="filter-select" @change="filterMembers">
              <option value="">全部职位</option>
              <option value="部长">部长</option>
              <option value="部员">部员</option>
            </select>
          </div>
          
          <table class="data-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学院简称</th>
                <th>部门</th>
                <th>职位</th>
                <th>联系方式</th>
                <th>入社时间</th>
                <th>备注</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(member, index) in filteredMembers" :key="member.id">
                <td>{{ index + 1 }}</td>
                <td>{{ member.name }}</td>
                <td>{{ member.college }}</td>
                <td>{{ member.department }}</td>
                <td>{{ member.position }}</td>
                <td>{{ member.phone }}</td>
                <td>{{ member.joinDate }}</td>
                <td>{{ member.remark }}</td>
                <td class="action-buttons">
                  <button @click="handleViewMember(member.id)" class="btn-view">查看</button>
                  <button @click="handleEditMember(member)" class="btn-edit">编辑</button>
                  <button @click="handleDeleteMember(member.id)" class="btn-delete">删除</button>
                </td>
              </tr>
              <tr v-if="filteredMembers.length === 0">
                <td colspan="9" class="no-data">暂无成员数据</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 排班管理 -->
        <div class="module-card" v-if="activeTab === 'scheduleManagement'">
          <div class="module-header">
            <h3>排班管理</h3>
            <button @click="showAddScheduleDialog = true" class="btn-primary">添加排班</button>
          </div>
          
          <div class="search-filter">
            <input 
              type="text" 
              v-model="scheduleSearch" 
              placeholder="搜索主题或负责人"
              class="search-input"
            >
            <select v-model="scheduleFilterStatus" class="filter-select">
              <option value="">全部状态</option>
              <option value="已完成">已完成</option>
              <option value="已安排">已安排</option>
              <option value="待确认">待确认</option>
            </select>
          </div>
          
          <table class="data-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>日期</th>
                <th>稿件主题</th>
                <th>负责人</th>
                <th>交稿时间</th>
                <th>交音频时间</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(schedule, index) in filteredSchedules" :key="schedule.id">
                <td>{{ index + 1 }}</td>
                <td>{{ schedule.date }}</td>
                <td>{{ schedule.theme }}</td>
                <td>{{ schedule.personInCharge }}</td>
                <td>{{ schedule.manuscriptDeadline }}</td>
                <td>{{ schedule.audioDeadline }}</td>
                <td :class="`status-${schedule.status}`">{{ schedule.status }}</td>
                <td class="action-buttons">
                  <button @click="handleEditSchedule(schedule)" class="btn-edit">编辑</button>
                  <button @click="handleDeleteSchedule(schedule.id)" class="btn-delete">删除</button>
                </td>
              </tr>
              <tr v-if="filteredSchedules.length === 0">
                <td colspan="8" class="no-data">暂无排班数据</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 部门会议 -->
        <div class="module-card" v-if="activeTab === 'departmentMeeting'">
          <div class="module-header">
            <h3>部门会议</h3>
            <button @click="showAddMeetingDialog = true" class="btn-primary">新增会议内容</button>
          </div>
          
          <div class="meeting-actions">
            <button @click="downloadMeetingTemplate" class="btn-secondary">下载会议记录模板</button>
            <input 
              type="text" 
              v-model="meetingSearch" 
              placeholder="搜索会议标题"
              class="search-input"
            >
          </div>
          
          <div class="meeting-list">
            <div 
              v-for="meeting in filteredMeetings" 
              :key="meeting.id" 
              class="meeting-item"
            >
              <div class="meeting-header">
                <h4>{{ meeting.title }}</h4>
                <div class="meeting-meta">
                  <span>日期：{{ meeting.date }}</span>
                  <span>主持人：{{ meeting.host }}</span>
                  <span>参会人数：{{ meeting.attendeeCount }}</span>
                </div>
              </div>
              <div class="meeting-content">
                <p>{{ meeting.content.length > 100 ? meeting.content.slice(0, 100) + '...' : meeting.content }}</p>
              </div>
              <div class="meeting-operations">
                <button @click="handleViewMeeting(meeting)" class="btn-view">查看详情</button>
                <button @click="handleEditMeeting(meeting)" class="btn-edit">编辑</button>
                <button @click="handleDeleteMeeting(meeting.id)" class="btn-delete">删除</button>
              </div>
            </div>
            <div class="empty-state" v-if="filteredMeetings.length === 0">
              <i class="iconfont icon-empty"></i>
              <p>暂无会议记录</p>
            </div>
          </div>
        </div>

        <!-- 个人中心 -->
        <div class="module-card" v-if="activeTab === 'personalCenter'">
          <div class="module-header">
            <h3>个人中心</h3>
          </div>
          
          <div class="profile-form">
            <div class="form-group">
              <label>姓名</label>
              <input type="text" v-model="userInfo.name" class="form-control" :disabled="isProfileEditing">
            </div>
            <div class="form-group">
              <label>学号</label>
              <input type="text" v-model="userInfo.studentId" class="form-control" disabled>
            </div>
            <div class="form-group">
              <label>学院</label>
              <input type="text" v-model="userInfo.college" class="form-control" :disabled="isProfileEditing">
            </div>
            <div class="form-group">
              <label>专业</label>
              <input type="text" v-model="userInfo.major" class="form-control" :disabled="isProfileEditing">
            </div>
            <div class="form-group">
              <label>联系方式</label>
              <input type="text" v-model="userInfo.phone" class="form-control" :disabled="isProfileEditing">
            </div>
            <div class="form-actions">
              <button 
                @click="isProfileEditing = !isProfileEditing" 
                class="btn-secondary"
                v-if="!isProfileEditing"
              >
                编辑信息
              </button>
              <button 
                @click="saveProfile" 
                class="btn-primary"
                v-if="isProfileEditing"
              >
                保存信息
              </button>
              <button 
                @click="cancelEditProfile" 
                class="btn-cancel"
                v-if="isProfileEditing"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>

  <!-- 添加/编辑成员弹窗 -->
  <Dialog 
    title="添加成员" 
    v-model:visible="showAddMemberDialog"
    @confirm="addMember"
  >
    <MemberForm :model="newMember" />
  </Dialog>
  
  <Dialog 
    title="编辑成员" 
    v-model:visible="showEditMemberDialog"
    @confirm="updateMember"
  >
    <MemberForm :model="editingMember" />
  </Dialog>

  <!-- 添加/编辑排班弹窗 -->
  <Dialog 
    title="添加排班" 
    v-model:visible="showAddScheduleDialog"
    @confirm="addSchedule"
  >
    <ScheduleForm 
      :model="newSchedule" 
      :members="diantaiMembers"
    />
  </Dialog>
  
  <Dialog 
    title="编辑排班" 
    v-model:visible="showEditScheduleDialog"
    @confirm="updateSchedule"
  >
    <ScheduleForm 
      :model="editingSchedule" 
      :members="diantaiMembers"
    />
  </Dialog>

  <!-- 添加/编辑会议弹窗 -->
  <Dialog 
    title="添加会议" 
    v-model:visible="showAddMeetingDialog"
    @confirm="addMeeting"
  >
    <MeetingForm :model="newMeeting" />
  </Dialog>
  
  <Dialog 
    title="编辑会议" 
    v-model:visible="showEditMeetingDialog"
    @confirm="updateMeeting"
  >
    <MeetingForm :model="editingMeeting" />
  </Dialog>

  <!-- 会议详情弹窗 -->
  <Dialog 
    title="会议详情" 
    v-model:visible="showMeetingDetailDialog"
    :footer="false"
  >
    <div class="meeting-detail">
      <h4>{{ currentMeeting.title }}</h4>
      <div class="meeting-detail-meta">
        <span>日期：{{ currentMeeting.date }}</span>
        <span>主持人：{{ currentMeeting.host }}</span>
        <span>参会人数：{{ currentMeeting.attendeeCount }}</span>
      </div>
      <div class="meeting-detail-content">
        <h5>会议内容：</h5>
        <p>{{ currentMeeting.content }}</p>
      </div>
      <div class="meeting-detail-content" v-if="currentMeeting.resolution">
        <h5>决议事项：</h5>
        <p>{{ currentMeeting.resolution }}</p>
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const authStore = useAuthStore()
const router = useRouter()

// 检查登录状态
onMounted(() => {
  if (!authStore.isLoggedIn) {
    router.push('/login')
  }

  // 从localStorage读取数据
  loadDataFromLocalStorage()
})

// 数据加载与保存
const loadDataFromLocalStorage = () => {
  const userInfoData = localStorage.getItem('userInfo')
  if (userInfoData) {
    userInfo.value = JSON.parse(userInfoData)
    originalUserInfo.value = JSON.parse(JSON.stringify(userInfo.value))
  }

  const membersData = localStorage.getItem('members')
  if (membersData) {
    members.value = JSON.parse(membersData)
  }

  const schedulesData = localStorage.getItem('schedules')
  if (schedulesData) {
    schedules.value = JSON.parse(schedulesData)
  }

  const meetingsData = localStorage.getItem('meetings')
  if (meetingsData) {
    meetings.value = JSON.parse(meetingsData)
  }
}

const saveDataToLocalStorage = () => {
  localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
  localStorage.setItem('members', JSON.stringify(members.value))
  localStorage.setItem('schedules', JSON.stringify(schedules.value))
  localStorage.setItem('meetings', JSON.stringify(meetings.value))
}

// 标签页管理
const activeTab = ref('memberManagement')

// 成员管理相关
const members = ref([
  { id: 1, name: '张明', studentId: '2021001', college: '计算机学院', department: '电台部', position: '部长', phone: '13800138001', joinDate: '2022-09-01', remark: '负责部门管理' },
  { id: 2, name: '李华', studentId: '2021002', college: '软件学院', department: '电台部', position: '部员', phone: '13800138002', joinDate: '2022-09-01', remark: '擅长音频剪辑' },
  { id: 3, name: '王芳', studentId: '2021003', college: '数字媒体学院', department: '电台部', position: '部员', phone: '13800138003', joinDate: '2023-03-15', remark: '新人' }
])

const memberSearch = ref('')
const memberFilterPosition = ref('')

// 筛选出电台部成员
const diantaiMembers = computed(() => {
  return members.value.filter(member => member.department === '电台部')
})

// 带搜索和筛选的成员列表
const filteredMembers = computed(() => {
  return diantaiMembers.value.filter(member => {
    const matchesSearch = member.name.includes(memberSearch.value) || 
                          member.studentId.includes(memberSearch.value)
    const matchesPosition = !memberFilterPosition.value || 
                           member.position === memberFilterPosition.value
    return matchesSearch && matchesPosition
  })
})

const showAddMemberDialog = ref(false)
const showEditMemberDialog = ref(false)
const newMember = ref({ 
  name: '', 
  studentId: '', 
  college: '',
  department: '电台部', 
  position: '部员', 
  phone: '', 
  joinDate: '',
  remark: '' 
})
const editingMember = ref({})

// 成员管理方法
const addMember = () => {
  if (!newMember.value.name || !newMember.value.studentId || !newMember.value.phone || !newMember.value.college || !newMember.value.joinDate) {
    ElMessage.error('请填写必填字段')
    return
  }
  
  const newId = members.value.length > 0 
    ? Math.max(...members.value.map(m => m.id)) + 1 
    : 1
  
  members.value.push({
    id: newId,
    ...newMember.value
  })
  
  // 重置表单并关闭弹窗
  resetNewMemberForm()
  saveDataToLocalStorage()
  ElMessage.success('成员添加成功')
}

const resetNewMemberForm = () => {
  newMember.value = { 
    name: '', 
    studentId: '', 
    college: '',
    department: '电台部', 
    position: '部员', 
    phone: '', 
    joinDate: '',
    remark: '' 
  }
  showAddMemberDialog.value = false
}

const handleViewMember = (id) => {
  router.push(`/buzhang/diantaiDetail/${id}`)
}

const handleEditMember = (member) => {
  editingMember.value = { ...member }
  showEditMemberDialog.value = true
}

const updateMember = () => {
  if (!editingMember.value.name || !editingMember.value.studentId || !editingMember.value.phone || !editingMember.value.college || !editingMember.value.joinDate) {
    ElMessage.error('请填写必填字段')
    return
  }
  
  const index = members.value.findIndex(m => m.id === editingMember.value.id)
  if (index !== -1) {
    members.value[index] = { ...editingMember.value }
  }
  
  showEditMemberDialog.value = false
  saveDataToLocalStorage()
  ElMessage.success('成员信息更新成功')
}

const handleDeleteMember = (id) => {
  if (confirm('确定要删除该成员吗？此操作不可撤销')) {
    members.value = members.value.filter(member => member.id !== id)
    saveDataToLocalStorage()
    ElMessage.success('成员已删除')
  }
}

// 排班管理相关
const schedules = ref([
  { id: 1, date: '2024-06-10', theme: '校园新闻', personInCharge: '张明', manuscriptDeadline: '2024-06-10 12:00', audioDeadline: '2024-06-10 18:00', status: '已完成' },
  { id: 2, date: '2024-06-12', theme: '音乐推荐', personInCharge: '李华', manuscriptDeadline: '2024-06-12 12:00', audioDeadline: '2024-06-12 18:00', status: '已安排' },
  { id: 3, date: '2024-06-14', theme: '人物访谈', personInCharge: '王芳', manuscriptDeadline: '2024-06-14 12:00', audioDeadline: '2024-06-14 18:00', status: '待确认' }
])

const scheduleSearch = ref('')
const scheduleFilterStatus = ref('')

const filteredSchedules = computed(() => {
  return schedules.value.filter(schedule => {
    const matchesSearch = schedule.theme.includes(scheduleSearch.value) || 
                         schedule.personInCharge.includes(scheduleSearch.value)
    const matchesStatus = !scheduleFilterStatus.value || 
                        schedule.status === scheduleFilterStatus.value
    return matchesSearch && matchesStatus
  })
})

const showAddScheduleDialog = ref(false)
const showEditScheduleDialog = ref(false)
const newSchedule = ref({
  date: '',
  theme: '',
  personInCharge: '',
  manuscriptDeadline: '',
  audioDeadline: '',
  status: '待确认'
})
const editingSchedule = ref({})

const addSchedule = () => {
  if (!newSchedule.value.date || !newSchedule.value.theme || !newSchedule.value.personInCharge || !newSchedule.value.manuscriptDeadline || !newSchedule.value.audioDeadline) {
    ElMessage.error('请填写必填字段')
    return
  }
  
  const newId = schedules.value.length > 0 
    ? Math.max(...schedules.value.map(s => s.id)) + 1 
    : 1
  
  schedules.value.push({
    id: newId,
    ...newSchedule.value
  })
  
  resetNewScheduleForm()
  saveDataToLocalStorage()
  ElMessage.success('排班添加成功')
}

const resetNewScheduleForm = () => {
  newSchedule.value = {
    date: '',
    theme: '',
    personInCharge: '',
    manuscriptDeadline: '',
    audioDeadline: '',
    status: '待确认'
  }
  showAddScheduleDialog.value = false
}

const handleEditSchedule = (schedule) => {
  editingSchedule.value = { ...schedule }
  showEditScheduleDialog.value = true
}

const updateSchedule = () => {
  if (!editingSchedule.value.date || !editingSchedule.value.theme || !editingSchedule.value.personInCharge || !editingSchedule.value.manuscriptDeadline || !editingSchedule.value.audioDeadline) {
    ElMessage.error('请填写必填字段')
    return
  }
  
  const index = schedules.value.findIndex(s => s.id === editingSchedule.value.id)
  if (index !== -1) {
    schedules.value[index] = { ...editingSchedule.value }
  }
  
  showEditScheduleDialog.value = false
  saveDataToLocalStorage()
  ElMessage.success('排班信息更新成功')
}

const handleDeleteSchedule = (id) => {
  if (confirm('确定要删除该排班吗？此操作不可撤销')) {
    schedules.value = schedules.value.filter(schedule => schedule.id !== id)
    saveDataToLocalStorage()
    ElMessage.success('排班已删除')
  }
}

// 部门会议相关
const meetings = ref([
  { 
    id: 1, 
    title: '新学期工作安排会议', 
    date: '2024-03-01', 
    host: '张明', 
    attendeeCount: 8,
    content: '讨论了新学期的节目安排、招新计划和设备更新事宜，确定了各节目负责人和时间安排。',
    resolution: '1. 3月15日前完成招新海报设计；2. 各节目负责人需在3月10日前提交节目策划'
  },
  { 
    id: 2, 
    title: '节目质量提升研讨会', 
    date: '2024-04-15', 
    host: '张明', 
    attendeeCount: 6,
    content: '针对上月节目反馈进行了分析，讨论了如何提升节目质量和创新节目形式。',
    resolution: '1. 增加校园访谈类节目比例；2. 每月进行一次节目互评'
  }
])

const meetingSearch = ref('')
const filteredMeetings = computed(() => {
  return meetings.value.filter(meeting => 
    meeting.title.includes(meetingSearch.value)
  )
})

const showAddMeetingDialog = ref(false)
const showEditMeetingDialog = ref(false)
const showMeetingDetailDialog = ref(false)
const newMeeting = ref({
  title: '',
  date: '',
  host: '',
  attendeeCount: 0,
  content: '',
  resolution: ''
})
const editingMeeting = ref({})
const currentMeeting = ref({})

const addMeeting = () => {
  if (!newMeeting.value.title || !newMeeting.value.date || !newMeeting.value.host || !newMeeting.value.attendeeCount || !newMeeting.value.content) {
    ElMessage.error('请填写必填字段')
    return
  }
  
  const newId = meetings.value.length > 0 
    ? Math.max(...meetings.value.map(m => m.id)) + 1 
    : 1
  
  meetings.value.push({
    id: newId,
    ...newMeeting.value
  })
  
  resetNewMeetingForm()
  saveDataToLocalStorage()
  ElMessage.success('会议记录添加成功')
}

const resetNewMeetingForm = () => {
  newMeeting.value = {
    title: '',
    date: '',
    host: '',
    attendeeCount: 0,
    content: '',
    resolution: ''
  }
  showAddMeetingDialog.value = false
}

const handleViewMeeting = (meeting) => {
  currentMeeting.value = { ...meeting }
  showMeetingDetailDialog.value = true
}

const handleEditMeeting = (meeting) => {
  editingMeeting.value = { ...meeting }
  showEditMeetingDialog.value = true
}

const updateMeeting = () => {
  if (!editingMeeting.value.title || !editingMeeting.value.date || !editingMeeting.value.host || !editingMeeting.value.attendeeCount || !editingMeeting.value.content) {
    ElMessage.error('请填写必填字段')
    return
  }
  
  const index = meetings.value.findIndex(m => m.id === editingMeeting.value.id)
  if (index !== -1) {
    meetings.value[index] = { ...editingMeeting.value }
  }
  
  showEditMeetingDialog.value = false
  saveDataToLocalStorage()
  ElMessage.success('会议记录更新成功')
}

const handleDeleteMeeting = (id) => {
  if (confirm('确定要删除该会议记录吗？此操作不可撤销')) {
    meetings.value = meetings.value.filter(meeting => meeting.id !== id)
    saveDataToLocalStorage()
    ElMessage.success('会议记录已删除')
  }
}

const downloadMeetingTemplate = () => {
  // 实际项目中这里应该是模板下载逻辑
  ElMessage.success('模板下载中...')
  console.log('下载会议记录模板')
}

// 个人中心相关
const userInfo = ref({
  name: '',
  studentId: '',
  college: '',
  major: '',
  phone: ''
})

const originalUserInfo = ref({})
const isProfileEditing = ref(false)

const saveProfile = () => {
  if (!userInfo.value.name || !userInfo.value.studentId || !userInfo.value.college || !userInfo.value.major || !userInfo.value.phone) {
    ElMessage.error('请填写必填字段')
    return
  }
  
  saveDataToLocalStorage()
  isProfileEditing.value = false
  ElMessage.success('个人信息保存成功')
}

const cancelEditProfile = () => {
  userInfo.value = { ...originalUserInfo.value }
  isProfileEditing.value = false
}
</script>

<style scoped>
.diantai-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.management-main {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.left-nav {
  width: 220px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: block;
  padding: 12px 15px;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s;
  margin-bottom: 8px;
}

.nav-item:hover {
  background-color: #f0f7ff;
  color: #3498db;
}

.nav-item.active {
  background-color: #3498db;
  color: white;
  font-weight: 500;
}

.content-area {
  flex: 1;
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-card {
  margin-bottom: 25px;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.module-header h3 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin: 0;
}

/* 按钮样式 */
.btn-primary {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #2980b9;
}

.btn-secondary {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-secondary:hover {
  background-color: #eee;
}

.btn-cancel {
  background-color: #f8f9fa;
  color: #6c757d;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
  transition: all 0.3s;
}

.btn-cancel:hover {
  background-color: #e9ecef;
}

/* 表格样式 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.data-table th,
.data-table td {
  border: 1px solid #e8e8e8;
  padding: 12px 15px;
  text-align: left;
}

.data-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.data-table tr:hover {
  background-color: #f9f9f9;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-view {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-edit {
  background-color: #f39c12;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-delete {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 20px;
}

/* 搜索筛选样式 */
.search-filter {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  align-items: center;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 1rem;
}

/* 会议样式 */
.meeting-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.meeting-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.meeting-item {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 15px;
  transition: box-shadow 0.3s;
}

.meeting-item:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.meeting-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.meeting-header h4 {
  margin: 0;
  color: #2c3e50;
}

.meeting-meta {
  display: flex;
  gap: 15px;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.meeting-content {
  margin-bottom: 15px;
  color: #555;
  line-height: 1.6;
}

.meeting-operations {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 个人中心样式 */
.profile-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-weight: 500;
}

.form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.form-actions {
  margin-top: 20px;
  display: flex;
}

/* 会议详情样式 */
.meeting-detail {
  padding: 10px;
}

.meeting-detail h4 {
  color: #2c3e50;
  margin-top: 0;
}

.meeting-detail-meta {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.meeting-detail-content {
  margin-bottom: 20px;
}

.meeting-detail-content h5 {
  margin-bottom: 5px;
  color: #34495e;
}

/* 状态标签样式 */
.status-已完成 {
  color: #27ae60;
  font-weight: 500;
}

.status-已安排 {
  color: #3498db;
  font-weight: 500;
}

.status-待确认 {
  color: #f39c12;
  font-weight: 500;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #7f8c8d;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 15px;
  color: #bdc3c7;
}
</style>